<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title><s:message code="app.title" /></title>
<%@ include file="Include.jsp"%>
<script type="text/javascript">
	
	$(document).ready(function() {
		
		$("input[id='jobno']").typeahead({
            source: function(query, process) {
				return getJob("jobno="+query, process);
            },
			updater: function(item){
				return populateJob(item);
		    },
			items : 4, minLength : 2
        });
		
		$("#jobno").focus();
	});
	
	/**
	 * This method will make an AJAX call to retrieve Officer Details and Display AJAX Based Typeahead in called
	 * text field. 
	 */
	function getJob(query,process){
		return $.ajax({
			type: "GET",
			url: "JobAutoComplete",
			data: ""+query,
			dataType: "json",
			success: function (json) {
				var sourceArr = [];

				$.map(json, function(product) {
					sourceArr.push(product.fieldname);
					return "\""+product.fieldname+"\"";
				});
				
				process(sourceArr);
			}
		});
	}
	
	function populateJob(item){
		$("input[id='jobnoId']").val(item.substring(item.lastIndexOf("-")+1));
		return item;
	}
	
</script>
</head>
<body>
	<div class="container">
		<%@ include file="Menu.jsp"%>
		<h2><s:message code="shippingBillForm.addheader" /></h2>
		<hr>
		<form:form id="cancelForm">
		</form:form>
		<form:form class="form-horizontal" method="post" name="jobRegisterForm" id="jobRegisterForm" commandName="JobRegisterForm"
	           modelAttribute="jobRegisterForm" >
	           <input type="hidden" name="jobnoId" id="jobnoId" />
			<table class="table table-bordered">
				<tr>
					<th><form:label path="jobno"><s:message code="shippingBillForm.jobno" /></form:label></th>
					<td>
						<form:input path="jobno" data-provide="typeahead" id="jobno" autocomplete="off" tabindex="1"/>
						<button class="btn btn-primary" type="submit" formaction="ListShippingBill" formmethod="get" tabindex="2"><s:message code="app.search" /></button>&nbsp;
			<button class="btn" type="submit" formaction="Home" form="cancelForm" formmethod="get" tabindex="3"><s:message code="app.cancel" /></button>
					</td>
				</tr>
			</table>
			
			
		</form:form>
	</div>
</body>
</html>